<template>
	<view class="container">
		<view class="employ_part" v-for="(item,index) in useCarList" :key="index">
			<view class="top_part" @click="recruitDetail(item.id)">
				<view class="left left-box">
					<view class="distance_address">
						{{item.leaveCity}}{{item.leaveArea}} - {{item.goArea}}
					</view>
					<!-- {{item.positionLabel}} -->
					<view class="time">{{item.createTime}}</view>
					<view class="types">
						<view class="type_item" v-if="item.number != ''">
							{{item.number}}人
						</view>
						<view class="type_item" v-if="item.size != ''">
							{{item.size}}
						</view>
						<view class="type_item" v-if="item.goodsType != ''">
							{{item.goodsType}}
						</view>
					</view>
					<view class="price">{{item.price}}</view>

				</view>
				<view class="right">
					<view class="go_rob" v-if="item.status===0">
						发布中
					</view>
					<view class="go_rob" v-if="item.status===1||item.status===2">
						已接单
					</view>
					<view class="go_rob no_bgr" v-if="item.status===3">
						申请售后
					</view>
					<view class="go_rob no_bgc" v-if="item.status===4">
						已取消
					</view>
					<view class="go_rob no_bgc" v-if="item.status===5">
						未完成
					</view>
					<view class="go_rob no_bgr" v-if="item.status===6">
						售后中
					</view>

				</view>

			</view>
			<view class="bottom_part">
				<view class="accept_part">
					<image src="../../static/img/refresh.png" mode=""></image>
					<view class="refresh">
						刷新
					</view>
					<image src="../../static/img/down.png" mode="" class="down"></image>
					<view class="" v-if="item.status == 0 || item.status == 1" @click="recruitDisabled(item.id,index,4)">
						取消订单
					</view>
					<view class="" v-if="item.status == 4" @click="recruitDisabled(item.id,index,1)">
						已下架
					</view>
					<!-- <view class="" style="margin-left: 60rpx;" @click="recruitDetail(item.id)">
						查看详情
					</view> -->
				</view>
				<view class="">
					<image style="height: 35rpx;" src="../../static/img/rubbish.png" @click="recruitDelete(item.id)" mode=""></image>
				</view>
			</view>
			<uni-popup ref="popup" type="bottom">
				<view class="pop">
					<label class="radio">
						<radio value="1" name="radio" :checked="checked===1" @click="radio(1)" /><text>已招到</text>
						<radio value="2" name="radio" :checked="checked===2" @click="radio(2)" /><text>未招到</text>
						<!-- <text style="margin-left: 50%;" @click="close()">关闭</text> -->
					</label>
					<button class="btn" type="default" @click="recruitStatus(item.id)">确定</button>
				</view>
			</uni-popup>
		</view>

		<view class="reach_bottom">
			~暂无更多内容~
		</view>
		<uni-popup ref="popup1" type="dialog">
			<uni-popup-dialog v-if="carStatus == 4" title="" content="确定取消用车吗？" :before-close="true" @close="close" @confirm="confirm"></uni-popup-dialog>
			<uni-popup-dialog v-else title="" content="确定重新上架吗？" :before-close="true" @close="close" @confirm="confirm"></uni-popup-dialog>
		</uni-popup>
		<uni-popup ref="popup2" type="dialog">
			<uni-popup-dialog  title="" content="确定删除订单？" :before-close="true" @close="close" @confirm="confirm1"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue'
	export default {
		data() {
			return {
				info:{
					status: 99,
					page:1,
					pageSize: 20
				},
				total:0,
				useCarList: [],
				show_pop: false,
				checked: 1,
				carUseId:'',
				carIndex:'',
				carStatus:'',
			}
		},
		components: {
			uniPopup,
			uniPopupDialog
		},
		mounted() {
			this.getCarList()
		},
		onPullDownRefresh(){ //下拉刷新
			this.info.page = 1
			this.getCarList()
			uni.stopPullDownRefresh()
		},
		onReachBottom(){ //上垃加载
		
			if(this.info.page < this.total) {
				this.info.page++
				this.getCarList(true)
			}
		},
		methods: {
			getCarList(tag) {
				let data = {
					page: 1,
					pageSize: 20,
				}
				this.$utils.requert({
					url: 'carUseList',
					data: data,
					type: 'post'
				}).then(res => {
					if (res.code === 1) {
						this.total = Math.ceil(res.data.total / this.info.pageSize)
						if(tag){
							this.useCarList = this.useCarList.concat(res.data.data)
						}else {
							this.useCarList = res.data.data
						}
					} else {
						this.$utils.showLayer(res.message)
					}
				})
			},
			recruitDelete(id) {
				this.carUseId = id
				this.$refs.popup2.open()
			},
			confirm1(done,value){
					this.$utils.requert({
						url: 'carUseDelete',
						data: {
							carUseId: this.carUseId
						},
						type: 'post'
					}).then(res => {
						this.$refs.popup2.close()
						if (res.code === 1) {
							this.$utils.showLayer(res.message)
							this.useCarList.splice(this.carIndex,1)
						} else {
							this.$utils.showLayer(res.message)
						}
					})
			},
			//查看详情
			recruitDetail(id) {
				uni.navigateTo({
					url:"/pages/receivingOrdersDetail/receivingOrdersDetail?type=user&id="+id
				})
			},
			//下架
			recruitDisabled(id, index, status) {
				this.carUseId = id
				this.carIndex = index
				this.carStatus = status
				this.$refs.popup1.open()
				
			},
			close(done) {
				done()
			},
			confirm(done,value){
				this.$utils.requert({
					url: 'carUseStatus',
					data: {
						carUseId: this.carUseId,
						status: this.carStatus
					},
					type: 'post'
				}).then(res => {
					this.$refs.popup1.close()
					if (res.code === 1) {
						this.$utils.showLayer(res.message)
						this.useCarList[this.carIndex].status = this.carStatus
					} else {
						this.$utils.showLayer(res.message)
					}
				})
			},
			//单选框
			radio(num) {
				this.checked = num
			}
		}
	}
</script>
<style>
	page {
		width: 100%;
		height: 100%;
		background-color: #fff;
	}
</style>

<style lang="less" scoped>
	.container {
		width: 100%;
		height: 100%;
		padding: 38rpx 23rpx;
		box-sizing: border-box;
	}

	.employ_part {
		padding: 40rpx 8rpx;
		/* display: flex;
		justify-content: space-between;
		position: relative; */
		border: 1rpx solid #f6f6f6;
		margin-bottom: 30rpx;

		border-radius: 7rpx;
	}

	.top_part {
		display: flex;
		justify-content: space-between;
		position: relative;
		margin-bottom: 30rpx;
	}

	.employ_part .name {
		font-size: 31rpx;
		color: #323232;
	}

	.left-box {
		max-width: 75%;
		overflow: hidden;

		.time {
			font-size: 24rpx;
			color: #C9C6C6;
			margin-top: 10rpx;
		}
	}

	.distance_address {
		font-size: 32rpx;
		line-height: 36rpx;
		color: #838282;
		text-overflow: ellipsis;
		color: #838282;
		text-overflow: ellipsis;
		white-space: nowrap;
		width: 100%;
		overflow: hidden;
	}

	.employ_part .types {
		display: flex;
		margin-bottom: 30rpx;
		margin-top: 30rpx;
	}

	.employ_part .types .type_item {
		padding: 0 8rpx;
		border: 1rpx solid #f6f6f6;
		font-size: 25rpx;
		color: #C9C6C6;
		margin-right: 16rpx;
	}

	.employ_part .price {
		font-size: 32rpx;
		color: #FB8408;
	}

	.company_person {
		font-size: 24rpx;
		color: #333333;
		display: flex;
		align-items: center;
		width: 100%;
	}

	.company_person image {
		width: 42rpx;
		height: 42rpx;
		margin-right: 17rpx;
	}

	.right {
		text-align: right;
	}

	.right .xiugai {
		margin-left: auto;
		display: flex;
		align-items: center;
		color: #7a7a7a;
		font-size: 24rpx;
		margin-top: 30rpx;
	}

	.xiugai {
		margin-left: auto;
		display: flex;
		align-items: center;
		color: #C9C6C6;
		font-size: 24rpx;
	}

	.right .xiugai image {
		width: 30rpx;
		height: 30rpx;
		margin-right: 10rpx;
	}

	.right .money {
		font-size: 28rpx;
		color: #FB8408;
	}

	.go_rob {
		width: 137rpx;
		height: 54rpx;
		line-height: 54rpx;
		text-align: center;
		color: #Fff;
		background-color: #FFA008;
		font-size: 28rpx;
		/* position: absolute;
		bottom: 40rpx; */
		margin-top: 40rpx;
		margin-left: auto;
		border-radius: 7rpx;
	}

	.bottom_part {
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-top: 1rpx solid #f6f6f6;
		padding: 30rpx 20rpx 0;
		box-sizing: border-box;
		font-size: 28rpx;
		color: #C9C6C6;
	}

	.bottom_part .accept_part {
		display: flex;
		align-items: center;

	}

	.bottom_part image:nth-child(3) {
		width: 30rpx;
		height: 32rpx;
	}

	.bottom_part image:nth-child(1) {
		width: 37rpx;
		height: 26rpx;
	}

	.bottom_part image:nth-child(2) {
		width: 33rpx;
		height: 30rpx;
	}

	.bottom_part image:nth-child(1) {
		margin-right: 10rpx;
	}

	.bottom_part .down {
		margin-right: 20rpx;
	}

	.reach_bottom {
		margin-top: 35rpx;
		text-align: center;
		font-size: 28rpx;
		color: #D5D1D1;
	}

	.no_bgc {
		background-color: #ccc;
	}
	.no_bgr{
			background: rgb(254,52,25);
	}
	.refresh {
		margin-right: 30rpx;
	}

	.pop {
		background-color: #fff;
	}

	.pop .radio {
		display: flex;
		height: 100rpx;
		width: 100%;
		align-items: center;
		font-size: 30rpx;
	}

	.pop .btn {
		width: 150rpx;
		font-size: 24rpx;
		background-color: #007AFF;
		color: #fff;
		margin: 0;
		margin-left: auto;
		margin-right: 40rpx;
	}
</style>
